import React, { FC, useState } from "react";
import { Layout, Menu } from "antd";
import { Outlet, useRoutes } from "react-router-dom";
import "antd/dist/reset.css";
// import "../../pages/index.css";
import { MenuCom } from "../../componement/MenuCom";
import route from "./../../router/index";
import { HeaderCom } from "../../componement/HeaderCom";
import "./index.css";
import {
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
const { Header, Sider, Content } = Layout;

export const HomeCom = () => {
  let element = useRoutes(route);
  console.log(element);
  let [collapsed, setCollapsed] = useState(false);
  PubSub.subscribe("Collapsed", (name, data) => {
    console.log(data, "qqqqq");
    setCollapsed(data);
    // console.log(collapsed, "12");
  });

  return (
    <div className="index_box">
      <div>
        <Sider
          trigger={null}
          collapsible
          collapsed={collapsed}
          collapsedWidth={80}
        >
          <div className="logo" />
          <MenuCom></MenuCom>
        </Sider>
      </div>
      <Layout className="site-layout">
        <Header>
          <HeaderCom />
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
            // background: colorBgContainer,
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </div>
  );
};
